CrossTool

The CrossTool adds a crosshair and axis labels to the chart for improved readability and interaction.

It consists of:

• Crosshair: vertical and horizontal lines that follow the mouse
• X/Y labels: axis projections aligned with the crosshair

Visibility and magnet mode

Use the methods below to control visibility and snapping behavior:

X label format

To set a fixed format for the X-axis label, use the following configuration:

import { getDefaultConfig } from '@devexperts/dxcharts-lite/dist/chart/chart.config';
const config = getDefaultConfig();
config.components.crossTool.xAxisLabelFormat = [{ format: 'dd.MM HH:mm' }];

To apply different formats based on time period—e.g., HH:mm for intraday and dd.MM for longer periods—use this extended configuration:

export default {
    xAxisLabelFormat: [
        {
            format: 'dd.MM',
            showWhen: {
                periodMoreThen: 24 * 60 * 60 * 1000,
            },
        },
        {
            format: 'HH:mm',
            showWhen: {
                periodLessThen: 24 * 60 * 60 * 1000,
                periodMoreThen: 6 * 1000,
            },
        },
        {
            format: 'HH:mm:ss',
            showWhen: {
                periodLessThen: 6 * 1000,
            },
        },
    ],
};

This approach also supports formats like HH:mm:ss for short intervals (e.g., 5 seconds).

Full CrossTool configuration example

export const fullCrossToolConfig: ChartConfigComponentsCrossTool = {
    type: 'cross-and-labels',
    discrete: false,
    magnetTarget: 'none',
    lineDash: [4, 6],
    xAxisLabelFormat: [
        {
            format: 'dd.MM.YYYY',
            showWhen: {
                periodMoreThen: 24 * 60 * 60 * 1000,
            },
        },
        {
            format: 'dd.MM.YYYY HH:mm',
            showWhen: {
                periodLessThen: 24 * 60 * 60 * 1000,
                periodMoreThen: 6 * 1000,
            },
        },
        {
            format: 'dd.MM.YYYY HH:mm:ss',
            showWhen: {
                periodLessThen: 6 * 1000,
            },
        },
    ],
    xLabel: {
        padding: {
            top: 4,
            bottom: 4,
            right: 8,
            left: 8,
        },
        margin: {
            top: 4,
        },
    },
    yLabel: {
        padding: {
            top: 4,
            bottom: 4,
            end: 4,
            start: 4,
        },
        type: 'badge',
    },
}

Chart with CrossTool enabled